import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
import { useState,useEffect } from "react";
export default function GetModal() {
  //const {isOpen, onOpen, onOpenChange} = useDisclosure();


  
  let [open, setOpen] = useState(false)
  const onOpen = () => { 
    console.log('start')
    setOpen(true) //打开模态框
    console.log(open,'ddd')
  }

  const onOpenChange = (isOpen) => { 
     console.log(isOpen,'changeState')
  }

  const closeFun = () => { 
    setOpen(false)
  }

  useEffect(() => {
    console.log('这是一个不含依赖数组的useEffect，每次render都会执行！')
  },[])

  /**
   * 这里是取得接口调用
   * 
   * useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('/api/data');
      setData(result.data);
    }
    fetchData();
  }, []);
*/
  
/**
 * 
function MyComponent() {
  useEffect(() => {
    const subscription = myEventEmitter.subscribe('event', () => {
      // 处理事件逻辑
    });
 
    return () => {
      subscription.unsubscribe();
    };
  }, []);
  return <div>My Component</div>;
}
 * 
*/

  return (
    <>
      <Button onClick={onOpen} color="warning" >Open Modal</Button>
      <Modal isOpen={open} onOpenChange={onOpenChange} onClose={ closeFun }>
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
              <ModalBody>
                <p> 
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Nullam pulvinar risus non risus hendrerit venenatis.
                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
                </p>
                <p >
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Nullam pulvinar risus non risus hendrerit venenatis.
                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
                </p>
                <p>
                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
                </p>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  Close
                </Button>
                <Button color="primary" onPress={onClose}>
                  Action
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
 }